@import "/src/styles/variables";

.third-recommend-container {
  margin-bottom: $marginBottomTags;
  @include tagsBasicStyle;

  &:hover ::after {
    width: 70px;
  }

  h2 {
    @include hotTagsH2;
  }

  ul {
    li {
      width: 100%;
      height: 200px;
      position: relative;
      margin-bottom: 10px;

      .mask {
        @include mask;
      }

      &:hover .mask {
        opacity: 0.2;
      }

      &:hover .content > div {
        background: #FFFFFF;
        color: $textHoverColor3;
      }

      .content {
        position: absolute;
        color: #fff;
        text-align: center;
        font-size: 16px;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0 40px;
        z-index: 2;
        cursor: pointer;

        & > div {
          width: 80px;
          margin: 10px auto;
          background: transparent;
          font-size: 12px;
          border: 1px solid #fff;
          border-radius: 40px;
          padding: 4px 0;
          transition: all .3s ease;
        }
      }
    }
  }

}
